<template>
  <div class="panel">
    <!-- Empty State -->
    <div v-if="props.resumeId === ''" class="empty-state">
      <div class="empty-content">
        <div class="radar-placeholder">
          <div class="radar-rings">
            <div class="ring ring-1"></div>
            <div class="ring ring-2"></div>
            <div class="ring ring-3"></div>
            <div class="ring ring-4"></div>
          </div>
          <div class="radar-lines">
            <div class="line line-1"></div>
            <div class="line line-2"></div>
            <div class="line line-3"></div>
            <div class="line line-4"></div>
            <div class="line line-5"></div>
          </div>
          <div class="center-dot"></div>
        </div>
        <h3 class="empty-title">暂无简历数据</h3>
        <p class="empty-description">请选择一份简历进行评估分析</p>
        <div class="empty-features">
          <div class="feature-item">
            <div class="feature-icon">📊</div>
            <span>多维评估</span>
          </div>
          <div class="feature-item">
            <div class="feature-icon">🎯</div>
            <span>精准分析</span>
          </div>
          <div class="feature-item">
            <div class="feature-icon">🚀</div>
            <span>智能优化</span>
          </div>
        </div>
      </div>
    </div>

    <!-- Chart Content -->
    <div v-else class="chart-container">
      <div class="header-section">
        <h2 class="chart-title">
          简历评估雷达图
        </h2>
        <div class="title-decoration"></div>
      </div>

      <div class="radar-chart">
        <canvas ref="radarChart" v-if="!isLoading"></canvas>
        <div class="chart-overlay" v-else>
          <LoadingSpinner text="正在拼命评估中..." />
        </div>
      </div>

      <div class="legend">
        <div class="legend-item">
          <div class="legend-color actual"></div>
          <span>实际值</span>
        </div>
        <div class="legend-item">
          <div class="legend-color standard"></div>
          <span>标准值</span>
        </div>
      </div>

      <div class="action-section">
        <button
            class="action-button analyse-button"
            @click="analyseResume"
            :disabled="isLoading"
        >
          进行分析
        </button>
        <button
            class="action-button optimize-button"
            @click="performOptimization"
            :disabled="isLoading"
        >
          进行优化
        </button>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref, computed, nextTick } from 'vue';
import {
  Chart, RadarController, RadialLinearScale, PointElement, LineElement, Filler, Tooltip, Legend
} from 'chart.js';
import {useRouter} from 'vue-router';
import {getResumeScore} from "@/http/m_api/template";
import {ElMessage} from "element-plus";
import LoadingSpinner from "@/components/common/LoadingSpinner.vue";

// 注册 Chart.js 组件
Chart.register(
    RadarController, RadialLinearScale, PointElement, LineElement, Filler, Tooltip, Legend
);

//从父组件接收参数
const props = defineProps({
  resumeId: {
    type: String,
    required: true
  }
})
watch(
    () => props.resumeId,
    (newVal, oldVal) => {
      analyseResume()
    }
);
const router = useRouter();
const radarChart = ref<HTMLCanvasElement | null>(null);
const showActualData = ref(false);
const isLoading = ref(false);
let chartInstance: Chart |  null = null;

const labels = [
  '全面的个人信息',
  '岗位相关的个人技能',
  '可量化的项目成果',
  '有结构的经历描述',
  '清晰的求职意向'
];

const actualData = ref([70, 65, 80, 90, 60]);

const standardData = [75, 75, 75, 75, 75];

const radarChartOptions = {
  responsive: true,
  maintainAspectRatio: false,
  elements: {
    line: {
      tension: 0
    }
  },
  scales: {
    r: {
      angleLines: {
        display: true,
        color: 'rgba(99, 102, 241, 0.2)',
        lineWidth: 1
      },
      grid: {
        color: 'rgba(99, 102, 241, 0.1)'
      },
      pointLabels: {
        font: {
          size: 14,
          weight: '600'
        },
        color: '#374151',
        padding: 20
      },
      suggestedMin: 0,
      suggestedMax: 100,
      ticks: {
        display: false,
        backdropColor: 'transparent'
      }
    }
  },
  plugins: {
    legend: {
      display: false
    },
    tooltip: {
      backgroundColor: 'rgba(255, 255, 255, 0.95)',
      titleColor: '#1f2937',
      bodyColor: '#374151',
      borderColor: 'rgba(99, 102, 241, 0.2)',
      borderWidth: 1,
      padding: 12,
      boxWidth: 12,
      boxHeight: 12,
      boxPadding: 4,
      usePointStyle: true,
      cornerRadius: 8
    }
  },
  animation: {
    duration: 2000,
    easing: 'easeOutQuart'
  }
}

const chartData = computed(() => ({
  labels: labels,
  datasets: [
    {
      label: '标准值',
      data: standardData,
      backgroundColor: 'rgba(16, 185, 129, 0.15)',
      borderColor: 'rgb(16, 185, 129)',
      borderWidth: 2,
      pointBackgroundColor: 'rgb(16, 185, 129)',
      pointBorderColor: '#fff',
      pointHoverBackgroundColor: '#fff',
      pointHoverBorderColor: 'rgb(16, 185, 129)',
      pointRadius: 5,
      pointHoverRadius: 7
    },
    {
      label: '实际值',
      data: actualData.value,
      backgroundColor: 'rgba(99, 102, 241, 0.15)',
      borderColor: 'rgb(99, 102, 241)',
      borderWidth: 3,
      pointBackgroundColor: 'rgb(99, 102, 241)',
      pointBorderColor: '#fff',
      pointHoverBackgroundColor: '#fff',
      pointHoverBorderColor: 'rgb(99, 102, 241)',
      pointRadius: 6,
      pointHoverRadius: 8
    }
  ]
}))

// 创建雷达图的函数
const createRadarChart = (canvas: HTMLCanvasElement, data: any, options: any) => {
  const ctx = canvas.getContext('2d');
  if (!ctx) return null;

  return new Chart(ctx, {
    type: 'radar',
    data,
    options
  });
};

const initChart = async () => {
  await nextTick();
  // 如果已经存在图表实例，先销毁它
  if (chartInstance) {
    chartInstance.destroy();
  }

  if(radarChart.value) {
    chartInstance = createRadarChart(radarChart.value, chartData.value, radarChartOptions)
  }
};

const performOptimization = () => {
  // 这里可以添加优化逻辑
  router.push({
    name: 'optimize',
    params: {
      id: props.resumeId
    }
  });
};


const analyseResume = async () => {
  showActualData.value = true;
  const res = await getResumeScore(props.resumeId);
  // console.log(res)
  actualData.value = res.data.scores;
  await initChart(); // 重新渲染图表，这次会包含实际值
};

onMounted(async () => {
  if (!props.resumeId) return;

  try {
    isLoading.value = true;
    const res = await getResumeScore(props.resumeId);
    // console.log(res)
    actualData.value = res.data.scores;
    await initChart();
    ElMessage.success('简历评分获取成功！');
  } catch (err) {
    console.error('获取简历数据失败:', err);
    await initChart();
    ElMessage.error('获取简历数据失败，请重试');
  } finally {
    isLoading.value = false;
  }
});
</script>

<style scoped lang="scss">
.panel {
  height: 100%;
  width: 100%;
  padding: 24px;
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  position: relative;
  overflow: hidden;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #6366f1, #10b981, #f59e0b, #ef4444, #8b5cf6);
  }
}

// Empty State Styles
.empty-state {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.empty-content {
  text-align: center;
  max-width: 400px;
}

.radar-placeholder {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 0 auto 32px;
}

.radar-rings {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.ring {
  position: absolute;
  border: 2px solid;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.3;
  animation: pulse 3s ease-in-out infinite;

  &.ring-1 {
    width: 40px;
    height: 40px;
    border-color: #6366f1;
    animation-delay: 0s;
  }

  &.ring-2 {
    width: 80px;
    height: 80px;
    border-color: #10b981;
    animation-delay: 0.5s;
  }

  &.ring-3 {
    width: 120px;
    height: 120px;
    border-color: #f59e0b;
    animation-delay: 1s;
  }

  &.ring-4 {
    width: 160px;
    height: 160px;
    border-color: #ef4444;
    animation-delay: 1.5s;
  }
}

.radar-lines {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.line {
  position: absolute;
  width: 2px;
  height: 80px;
  background: linear-gradient(to bottom, rgba(99, 102, 241, 0.6), transparent);
  top: 50%;
  left: 50%;
  transform-origin: bottom center;
  animation: rotate 8s linear infinite;

  &.line-1 { transform: translate(-50%, -100%) rotate(0deg); }
  &.line-2 { transform: translate(-50%, -100%) rotate(72deg); }
  &.line-3 { transform: translate(-50%, -100%) rotate(144deg); }
  &.line-4 { transform: translate(-50%, -100%) rotate(216deg); }
  &.line-5 { transform: translate(-50%, -100%) rotate(288deg); }
}

.center-dot {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  background: #6366f1;
  border-radius: 50%;
  animation: glow 2s ease-in-out infinite alternate;
}

.empty-title {
  font-size: 24px;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 12px;
}

.empty-description {
  font-size: 16px;
  color: #6b7280;
  margin-bottom: 32px;
  line-height: 1.5;
}

.empty-features {
  display: flex;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
}

.feature-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px;
  background: white;
  border: 1px solid rgba(229, 231, 235, 0.5); // 添加浅灰色边框
  border-radius: 12px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s ease;

  &:hover {
    transform: translateY(-2px);
  }
}

.feature-icon {
  font-size: 24px;
  margin-bottom: 4px;
}

// Chart Content Styles
.chart-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.header-section {
  text-align: center;
  margin-bottom: 32px;
  position: relative;
}

.chart-title {
  font-size: 28px;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.title-icon {
  font-size: 32px;
}

.title-decoration {
  width: 60px;
  height: 4px;
  background: linear-gradient(90deg, #6366f1, #10b981);
  border-radius: 2px;
  margin: 0 auto;
}

.radar-chart {
  width: 100%;
  height: 400px;
  position: relative;
  margin-bottom: 24px;
  background: white;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.chart-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.9);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  gap: 16px;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #e5e7eb;
  border-top: 4px solid #6366f1;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.legend {
  display: flex;
  justify-content: center;
  gap: 32px;
  padding: 16px 24px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  margin-bottom: 24px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 500;
  color: #374151;
}

.legend-color {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);

  &.actual {
    background-color: rgb(99, 102, 241);
  }

  &.standard {
    background-color: rgb(16, 185, 129);
  }
}

.action-section {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: auto;
}

.action-button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

  &:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }

  &:not(:disabled):hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  }

  &:not(:disabled):active {
    transform: translateY(0);
  }
}

.analyse-button {
  background: linear-gradient(135deg, #10b981, #059669);
  color: white;

  &:not(:disabled):hover {
    background: linear-gradient(135deg, #059669, #047857);
  }
}

.optimize-button {
  background: linear-gradient(135deg, #6366f1, #4f46e5);
  color: white;

  &:not(:disabled):hover {
    background: linear-gradient(135deg, #4f46e5, #4338ca);
  }
}

.button-icon {
  font-size: 18px;
}

// Animations
@keyframes pulse {
  0%, 100% {
    opacity: 0.3;
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    opacity: 0.6;
    transform: translate(-50%, -50%) scale(1.05);
  }
}

@keyframes rotate {
  from {
    transform: translate(-50%, -100%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -100%) rotate(360deg);
  }
}

@keyframes glow {
  from {
    box-shadow: 0 0 5px rgba(99, 102, 241, 0.5);
  }
  to {
    box-shadow: 0 0 20px rgba(99, 102, 241, 0.8);
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

// Responsive Design
@media (max-width: 768px) {
  .panel {
    padding: 16px;
  }

  .chart-title {
    font-size: 24px;
  }

  .radar-chart {
    height: 300px;
    padding: 16px;
  }

  .action-section {
    flex-direction: column;
    gap: 12px;
  }

  .action-button {
    width: 100%;
    justify-content: center;
  }

  .empty-features {
    flex-direction: column;
    gap: 16px;
  }

  .legend {
    flex-direction: column;
    gap: 16px;
  }
}
</style>